Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
<div id="intro"> <h1>MOUSE MOVEMENT<br/><b>MOTION BLUR</b></h1> <h2>Move/Click the cursor fast and slooooooooowww</h2> </div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div id="copy"><a href="https://twitter.com/igcorreia" target="_blank">Crafted by: <b>@igcorreia</b></a></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js'></script>
* { cursor: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } html { font-family: 'Lato', sans-serif; min-height: 100%; height: 100%; background: #000; overflow: hidden; cursor: none; } html body { min-height: 100%; height: 100%; cursor: none; margin: 0; padding: 0; background: #4a4a4a; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #4a4a4a 0%, #2a2a2a 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #4a4a4a), color-stop(100%, #2a2a2a)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #4a4a4a 0%, #2a2a2a 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #4a4a4a 0%, #2a2a2a 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #4a4a4a 0%, #2a2a2a 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #4a4a4a 0%, #2a2a2a 100%); /* W3C */ } html body #copy { position: absolute; bottom: 0; height: 40px; width: 100%; text-align: center; text-transform: uppercase; line-height: 14px; font-size: 10px; font-weight: 400; z-index: 999; } html body #copy a { color: #898989; text-decoration: none; transition: all 0.3s ease-in-out 0s; cursor: none; } html body #copy a b { font-weight: 700; } html body #copy a:hover { color: #fff; } html body .box { position: absolute; width: 25px; height: 25px; top: 50%; left: 50%; margin: -50 0 0 -50px; background: rgba(255, 255, 255, 0.2); border-radius: 50px; -webkit-backface-visibility: hidden; opacity: 0; cursor: none; } html body .box.arrow { background: url('http://lmgtfy.com/assets/mouse_arrow_windows_aero-b118000dc97d4558d6db021793acc613.png') no-repeat 0 0 transparent; border-radius: 0; } html #intro { position: relative; font-size: 20px; font-weight: 100; text-align: center; float: none; display: block; width: 100%; color: #767676; cursor: none; padding-top: 80px; text-transform: uppercase; } html #intro .select { margin-top: 20px; position: relative; z-index: 999999; } html #intro .select span { color: #fff; font-weight: 400; padding: 0 20px; position: relative; letter-spacing: 1px; } html #intro a { color: #fff; text-decoration: none; font-weight: 900; font-size: 11px; text-shadow: none; margin-top: 20px; display: block; text-shadow: 0 1px 0 #000; letter-spacing: 1px; cursor: pointer; position: relative; z-index: 9999; } html #intro h1 { margin: 0; padding: 0; color: #eee; font-weight: 100; letter-spacing: 10px; font-size: 120%; } html #intro h1 b { font-size: 260%; letter-spacing: -0.4px; font-weight: 700; display: block; overflow-y: hidden; text-shadow: 10px 0 106px rgba(255, 255, 255, 0.96), -10px 0 106px rgba(255, 255, 255, 0.96), 0 0 20px #ffffff, 0 0 5px #ffffff; overflow-x: visible; height: 45px; line-height: 42px; margin-top: 10px; box-shadow: 0 0 50px 20px rgba(0, 0, 0, 0.07); } html #intro h2 { margin: 10px 0 0 0; padding: 0; color: #999; font-size: 80%; font-weight: 300; }
/* * I will keep publishing examples to help push the web foward. * PLEASE Like, Heart or Share if you like, and don't forget to follow. * Thanks. * * Now let's animate it :) */ var $box = $('.box'), inter = 30, speed = 0; function moveBox(e) { //TweenMax.killTweensOf(); $box.each(function(index, val) { TweenLite.to($(this), 0.05, { css: { left: e.pageX, top: e.pageY},delay:0+(index/750)}); }); } $(window).on('mousemove', moveBox); $box.each(function(index, val) { index = index + 1; TweenMax.set( $(this),{ autoAlpha: 1, delay:0 }); }); TweenMax.set( $('.text:nth-child(30)'), { autoAlpha: 1, delay: 0 } ); //V2.0 $('.pointer').mouseover(function(){ //console.log('cursor'); $box.addClass('arrow'); }); $('.circle').mouseover(function(){ //console.log('circle'); $box.removeClass('arrow'); });